<template>
    <!--    <div>-->
    <div class="auditBox settle-sub-box">
        <!--            <div class="infoBox" v-for="(item, index) in list" :key="index">-->
        <!--                <ul>-->
        <!--                    <li class="clearfix">-->
        <!--                        <div class="label">就诊科室：</div>-->
        <!--                        <div class="value">{{item.dept + ' ' + item.doctorName}}</div>-->
        <!--                    </li>-->
        <!--                    <li class="clearfix">-->
        <!--                        <div class="label">就诊时间：</div>-->
        <!--                        <div class="value">{{item.appointmentDate + ' ' + item.dayStr + ' ' + item.visitTime}}</div>-->
        <!--                    </li>-->
        <!--                </ul>-->
        <!--            </div>-->
        <!--            <div v-if="!list[0]" class="info">没有预约记录</div>-->
        <div class="list clearfix" v-for="(list,index) in list" :key="index">
            <div class="head">
                <!--                    <span class="state">预约成功</span>-->
                就诊人：{{list.userName}}
            </div>
            <div class="cont">
                <div class="clearfix">
                    <div class="label">就诊科室：</div>
                    <div class="value">{{list.dept + ' ' + list.doctorName}}</div>
                </div>
                <div class="clearfix">
                    <div class="label">就诊时间：</div>
                    <div class="value">{{list.appointmentDate + ' ' + list.dayStr + ' ' + list.visitTime}}</div>
                </div>
            </div>
            <!--                <div class="foot">-->
            <!--                    <span class="button" @click="cancel(list)">取消预约</span>-->
            <!--                    <div class="clearfix">-->
            <!--                        <div class="label">提交时间：</div>-->
            <!--                        <div class="value">{{list.createTime}}</div>-->
            <!--                    </div>-->
            <!--                </div>-->
        </div>
        <div v-if="!list[0]" class="empty">没有预约记录</div>
    </div>
    <!--        <com-buttom></com-buttom>-->
    <!--    </div>-->
</template>

<script>
    import comButtom from './buttom'

    export default {
        data() {
            return {
                tk: '',
                type: '',
                list: []
            }
        },
        mounted() {
            this.tk = this.$route.query.tk
            this.type = this.$route.query.type
            this.init()
        },
        methods: {
            init() {
                this.$vux.loading.show()
                this.$http.post('/recorder/recordInfo?tk=' + this.tk).then(result => {
                    if (result.success && result.data) {
                        this.list = result.data.expertsAppointmentList
                        this.$vux.loading.hide()
                    }
                })
            }
        },
        components: {
            comButtom
        },
        beforeRouteLeave(to, from, next) {
            this.$emit('update')
            next()
        }
    }
</script>

<style scoped lang="less">
    .info {
        margin: 2rem;
        text-align: center;
        font-size: .28rem;
        color: #999;
    }

    .auditBox {
        width: 100%;
        height: 100%;
        background-color: #f4f4f4;
        padding: .2rem;

        .infoBox {
            /*height: 2.6rem;*/
            padding: .3rem;
            box-shadow: 0 0 .2rem rgba(0, 0, 0, .1);
            margin-bottom: .2rem;
            border-radius: 3px;

            ul {
                li {
                    overflow: hidden;
                    width: 100%;

                    div {
                        float: left;
                    }

                    .name {
                        min-width: 20%;
                        margin-right: .3rem;
                    }

                    .phone {
                        /*margin-right: 1.6rem;*/
                    }

                    .personnel {
                        padding: 0 .2rem;
                        border-radius: .3rem;
                        color: #fff;
                        float: right;
                    }

                    .patients {
                        background-color: #FF6464;
                    }

                    .family {
                        background-color: #FFC565;
                    }

                    .staff {
                        background-color: #658CFF;
                    }
                }

                .Idcard {
                    margin: .3rem 0;
                }
            }
        }

        .list {
            background-color: #fff;
            margin-bottom: .15rem;

            > div {
                padding: 0 .3rem;
                border-bottom: 1px solid #eee;

                &:last-child {
                    border: 0 none;
                }

                .label {
                    float: left;
                    width: 1.45rem;
                    color: #999;
                }

                .value {
                    margin-left: 1.45rem;
                }
            }

            .head {
                line-height: .8rem;

                .state {
                    float: right;
                    color: #999;
                }
            }

            .cont {
                padding-top: .15rem;
                padding-bottom: .15rem;
                line-height: .5rem;

            }

            .foot {
                line-height: .8rem;

                .button {
                    float: right;
                    background-color: #f4f4f4;
                    border: 1px solid #ddd;
                    padding: 0 .2rem;
                    font-size: .24rem;
                    line-height: .5rem;
                    height: .5rem;
                    margin-top: .15rem;
                    border-radius: .3rem;
                }
            }
        }

        .empty {
            text-align: center;
            padding-top: .5rem;
            color: #999;
        }
    }
</style>
